<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>工具主页面</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="工具集合">

<link rel="stylesheet" type="text/css" href="<%=path%>/easyui/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/easyui/themes/icon.css">
<script type="text/javascript" src="<%=path%>/easyui/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=path%>/easyui/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=path%>/easyui/js/easyui-lang-zh_CN.js"></script>

</head>

<body class="easyui-layout">

	<div data-options="region:'west',split:true,title:'菜单栏'" style="width:200px;">
		<!-- 菜单选项 -->
		<div class="easyui-accordion" data-options="fit: true">
			<c:forEach var="item" items="${menuMap }">
				<div title="${item.key }"><ul class="easyui-tree"></ul></div>
			</c:forEach>
		</div>
	</div>
	
	<div data-options="region:'center',title:''">
		<div id="tabs_id" class="easyui-tabs" data-options="fit: true,toolPosition:'left' "></div>
	</div>

	<div id="tab-tools">
		<a href="javascript:void(0);" onclick="deleteAllTabs();" class="easyui-linkbutton" plain="true" iconCls="icon-remove"></a>
	</div>

	<script type="text/javascript">
		
		$(function(){
			var menuMapo = ${menuMap };
			$("div.panel-body.accordion-body ul.easyui-tree").each(function(){
				var title = $(this).parent().prev().find("div.panel-title").text();
				
				$(this).tree({
					data: menuMapo[title],
					onClick: function(node){
						if(isExists(node)){
							selectTab(node);
						}else{
							addTab(node);
						}
					}
				});
			});
			
			$("#tabs_id").tabs({
				tools:'#tab-tools'
			});
			
		});
		
		function isExists(node) {
			return $('#tabs_id').tabs("exists", node.text);
		}

		function selectTab(node) {
			$('#tabs_id').tabs("select", node.text);
		}
		
		function addTab(node){
			//将tab的数据限制在5个以内
			var tabs = $("#tabs_id").tabs("tabs");
			var tabCount = tabs.length;
			if(tabCount == 5){
				$("#tabs_id").tabs("close", 0);
			}
			
			//console.log(node.attributes["url"]);
			var url = "<%=path%>/main/toIndex.do?title=" + node.attributes["url"];
			var content = "<iframe id='syiframe_id_"+ node.id +"' frameborder='0' width='100%' height='100%' src='" + url + "'></iframe>";
			$("#tabs_id").tabs("add", {
				title : node.text,
				content : content,
				closable : true,
				tools : [{
					iconCls : 'icon-mini-refresh',
					handler : function() {
						$("#syiframe_id_"+ node.id +"").attr("src", $("#syiframe_id_"+ node.id +"").attr("src"));
					}
				}]
			});
		}
		
		function deleteAllTabs(){
			var tabs = $("#tabs_id").tabs("tabs");
			var tabCount = tabs.length;
			for(var i = 0; i <tabCount ; i++ ){
				$("#tabs_id").tabs("close", 0);
			}
		}
		
		
	</script>
</body>

</html>